<template>
  <view class="page">
    <view v-if="$data.info">
      <view class="status" :style="[$data.info._config.style]">
        {{ $data.info._config.label }}
      </view>
      <!-- 基本信息 -->
      <view class="card margin-top">
        <view class="row">
          <view class="row_left">实付金额</view>
          <view class="row_right">{{ $data.info.orderTotalPrice }}</view>
        </view>
        <view class="row">
          <view class="row_left">退款金额</view>
          <view class="row_right">{{ $data.info.orderRefundPrice }}</view>
        </view>
        <view v-if="$data.info._diff > 0" class="red">
          *因保洁师已上门后取消订单，需扣除{{ $data.info._diff }}元上门费
        </view>
        <view class="row">
          <view class="row_left">退款渠道</view>
          <view class="row_right">{{ $data.info._wayConfig.label }}</view>
        </view>
        <view class="row">
          <view class="row_left">加急退款</view>
          <view class="row_right">{{ $data.info.fastRefundPrice }}</view>
        </view>
        <view class="row">
          <view class="row_left">退款渠道</view>
          <view class="row_right">{{ $data.info._wayJJConfig.label }}</view>
        </view>
      </view>
      <!-- 优惠券 -->
      <view class="card margin-top" v-if="$data.info.coupon.length > 0">
        <view class="row margin-bottom">
          <view class="row_left">退优惠券</view>
        </view>
        <view
          class="list-item"
          v-for="(item, index) of $data.info.coupon"
          :key="index"
        >
          <view class="coupon">
            <view class="left_img">
              <image :src="ImgCouponLeftGreen" />
              <view class="left_img--text">
                <view
                  class="price text-center"
                  :class="[
                    { 'text-price': item.couponType == couponType.money },
                  ]"
                >
                  {{ item.actualPrice }}
                  <text v-if="item.couponType == couponType.discount">折</text>
                </view>
                <view class="margin-top-xs desc u-line-1">
                  满
                  {{ item.fullPrice }}
                  元可用
                </view>
              </view>
            </view>
            <view class="right">
              <view class="right_title">
                <text v-if="item._couponTypeName">
                  【{{ item._couponTypeName }}】
                </text>
                <text>
                  {{ item.title }}
                </text>
              </view>
              <view class="right_time text-wrap">
                <text v-if="item.validityType == couponWellType.today">
                  领取后{{ item.validDays }}天内有效
                </text>
                <text v-else-if="item.validityType == couponWellType.date">
                  可预约{{ item.startTime }}至{{ item.endTime }}的服务
                </text>
              </view>
              <view class="right_btn" @tap="onOpen(item)">
                <view class="margin-right-xs">使用说明</view>
                <up-icon
                  :name="item._open ? 'arrow-up' : 'arrow-down'"
                  :color="BasicConfig.MainColor"
                ></up-icon>
              </view>
            </view>
          </view>
          <view v-if="item._open" class="coupon-desc">
            <view class="desc_row">
              1.限用服务：{{ item.domesticServiceTitle }}
            </view>
            <view class="desc_row margin-tb">
              2.限用城市：{{ item.useCity }}
            </view>
            <view class="desc_row"> 3.限用日期：{{ item._useDate }} </view>
          </view>
        </view>
      </view>
      <!-- 审批流 -->
      <view class="examine">
        <!-- <up-steps
          current="1"
          direction="column"
          :activeColor="BasicConfig.MainColor"
          :dot="true"
        >
          <up-steps-item title="已下单" desc="10:30"> </up-steps-item>
          <up-steps-item title="已出库" desc="10:35"> </up-steps-item>
          <up-steps-item title="运输中" desc="11:40"></up-steps-item>
        </up-steps> -->
        <view
          class="dot-item"
          v-for="(item, index) of $data.info.auditJson"
          :key="index"
          :id="`item_${index}`"
        >
          <view
            class="dot-offset flex justify-center align-center"
            :class="[
              {
                dot: index < $data.info.auditJson.length - 1,
                'last-dot': index === $data.info.auditJson.length - 1,
              },
            ]"
          >
            <view class="point"></view>
          </view>
          <view class="margin-left-sm content">
            <view class="flex justify-between align-center">
              <view class="u-line-1">{{ item.title }}</view>
              <view class="text-gray">{{ item.createAt }}</view>
            </view>
            <view class="margin-top">
              {{ item.content }}
              平台已将退款提交给支付渠道方处理，通常情况下，退款会原路退回您的支付账户，微信会在3个工作日内到账。
              平台已将退款提交给支付渠道方处理，通常情况下，退款会原路退回您的支付账户，微信会在3个工作日内到账。
              平台已将退款提交给支付渠道方处理，通常情况下，退款会原路退回您的支付账户，微信会在3个工作日内到账。
            </view>
          </view>
        </view>
        <!-- </view> -->
      </view>
      <!-- 底部按钮 -->
      <view class="foot foot_box">
        <view class="btn btn_save" @tap="onReset">联系客服</view>
      </view>
    </view>
    <PopupLogin />
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick, computed } from "vue";
import { onLoad, onShow, onHide, onReady, onUnload } from "@dcloudio/uni-app";
import { refundOrderDetail } from "../../../../api/Interface/order";
import errorCode from "../../../../utils/http/errorCode";
import { isDev } from "../../../../utils/env";
import BasicConfig from "../../../../utils/config";
import { jumpPage } from "../../../../utils/route/route";
import { ImgCouponLeftGreen } from "../../../../utils/iconMap";
import {
  orderRefundStatus,
  orderRefundStatusConfig,
  orderRefundWayConfig,
} from "../../../../enums/order";
import {
  couponType,
  couponTypeConfig,
  couponUseTypeConfig,
  couponWellType,
} from "../../../../enums/coupon";
import { useImgSrc } from "../../../../hooks/useImg";
const $data = reactive({
  localNo: "",
  info: null,
});
const init = () => {
  refundOrderDetail({ localNo: $data.localNo }).then((res) => {
    if (res.code === errorCode.success) {
      $data.info = res.data;
      if ($data.info) {
        const {
          refundStatus,
          orderRefundMode,
          fastRefundMode,
          orderTotalPrice = 0,
          orderRefundPrice = 0,
        } = $data.info;
        $data.info._picurl = useImgSrc($data.info.picurl);
        $data.info._config = orderRefundStatusConfig[refundStatus] ?? {};
        // 退款渠道
        $data.info._wayConfig = orderRefundWayConfig[orderRefundMode] ?? {};
        // 加急退款渠道
        $data.info._wayJJConfig = orderRefundWayConfig[fastRefundMode] ?? {};
        // 扣款 实付金额-退款金额
        $data.info._diff = (orderTotalPrice - orderRefundPrice).toFixed(2);
        $data.info._diff = $data.info._diff >= 0 ? $data.info._diff : 0;
        if (isDev) {
          $data.info.coupon = [
            {
              userCouponId: 1, //用户优惠券id
              title: "测试优惠券1", //优惠券名称
              couponType: 1, //优惠券类型1代金券2折扣券
              actualPrice: 100, //【couponType=1优惠券金额=2折扣比例 】
              fullPrice: 0, //满减条件金额
              domesticServiceId: 1,
              startTime: "2024-12-01", //开始时间
              endTime: "2025-12-02", //结束时间
              useCity: "22", //可用城市code编码
              status: 1, //使用状态0=未使用1=已使用2=已过期
              maxUse: 0, //【couponType=2用】折扣券最大使用金额
              useType: "0", //限时可用0不限1周末2工作日
              domesticServiceTitle: "日常服务", //可用服务名称
              description: [
                "1、限用服务：日常服务",
                "2、限用城市:不限",
                "3、限用日期:不限",
              ],
            },
          ];
        }
        $data.info.coupon.forEach((item) => {
          item._open = false;
          item._couponTypeName =
            couponTypeConfig[item.couponType]?.typeName ?? "";
          item._useDate = couponUseTypeConfig[item.useType]?.desc ?? "";
        });
      }
    }
  });
};
const onOpen = (e) => {
  e._open = !e._open;
};
onLoad((options) => {
  $data.localNo = options.localNo;
  init();
});
onUnload(() => {});
onReady(() => {});
</script>

<style lang="scss" scoped>
@import "../../../static/style/order/detail/common.scss";
.page {
  .status {
    padding: 30rpx;
    background: #ffffff;
    font-weight: 700;
  }
  .card {
    padding: 0 30rpx;
  }
  .red {
    color: #e61111;
    font-size: 30rpx;
    padding: 30rpx 0;
  }

  .examine {
    padding: 60rpx 30rpx 30rpx 30rpx;
    background: #ffffff;
  }

  .list-item {
    position: relative;
    margin-top: 30rpx;
    border-radius: 20rpx;
    background: var(--bg-desc-color);
    .coupon {
      background: #ffffff;
      display: flex;
      align-items: center;
      height: 240rpx;
      .left_img {
        width: 250rpx;
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 100%;
          height: 100%;
        }
        &--text {
          color: #ffffff;
          text-align: center;
          position: absolute;
          .price {
            font-size: 50rpx;
            font-weight: 700;
          }
          .desc {
            font-size: 32rpx;
            color: #ffffff;
          }
        }
      }
      .right {
        padding: 30rpx;
        width: calc(100% - 250rpx);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        &_title {
          font-size: 34rpx;
          font-weight: 700;
        }
        &_time {
          font-size: 32rpx;
        }
        &_btn {
          color: $main-color;
          font-size: 32rpx;
          display: flex;
          align-items: center;
        }
      }
    }
    .coupon-desc {
      padding: 30rpx;
      .desc_row {
        font-size: 32rpx;
        font-weight: 700;
      }
    }
  }

  .dot-item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    padding: 20rpx;
    position: relative;
    .content {
      width: calc(100% - 30rpx);
      padding: 30rpx;
      // box-shadow: 0px 0px 20rpx #f0f0f0;
      border-radius: 15rpx;
      // height: 130rpx;
      height: fit-content;
    }
  }
  .dot {
    position: relative;
    width: 50rpx;
    height: 50rpx;
    border-radius: 100%;
    &:not(:last-child)::before {
      content: "";
      position: absolute;
      left: calc(50% - 1px);
      // top: 120%;
      // height: 120rpx;
      top: 0;
      height: 120rpx;
      border-left: 1px dashed green;
      width: 0px;
    }
  }
  .last-dot {
    position: relative;
    width: 50rpx;
    height: 50rpx;
    border-radius: 100%;
  }

  .point {
    width: 30rpx;
    height: 30rpx;
    border-radius: 100%;
    background: $main-color;
  }

  .dot-offset {
    left: -17rpx;
  }

  .dot-end-offset {
    left: -21rpx;
  }
  .active {
    // box-shadow: 0rpx 0rpx 20rpx rgba($main-color, 0.2) !important;
    box-shadow: 0rpx 0rpx 20rpx $main-color !important;
    // box-shadow: 0rpx 0rpx 20rpx rgba($color: $main-color, $alpha: 0.2) !important;
  }
}
</style>
